<template>
  <div>
    <el-table size="mini" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="userCard" label="身份证号" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="wuqTitle" label="机构名称" width="140">
      </el-table-column>
      <el-table-column prop="pTitle" label="职位名称" width="160">
      </el-table-column>

      <!-- <el-table-column prop="in" label="上班签到" width="80"> </el-table-column> -->
      <el-table-column prop="inDate" label="上班打卡时间" width="200">
        <template slot-scope="{ row }">
          <div v-if="row.editStatus">
            <el-date-picker
            size="mini"
              v-model="editForm.inDate"
              type="datetime"
            value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <span v-else>{{ row.inDate }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="out" label="" width="80"> </el-table-column> -->
      <el-table-column prop="outDate" label="下班打卡时间" width="200">
        <template slot-scope="{ row }">
          <div v-if="row.editStatus">
            <el-date-picker
            size="mini"
              v-model="editForm.outDate"
              type="datetime"
            value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <span v-else>{{ row.outDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="打卡状态" width="80">
      </el-table-column>
      <el-table-column prop="settleHours" label="工作量" width="80">
        <template slot-scope="{ row }">
          <div style="display: flex">
            <el-input
              style="width: 60px"
              size="mini"
              v-if="row.editStatus"
              v-model="editForm.settleHours"
            ></el-input>
            <span v-else> {{ row.settleHours }} </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="settleStatus" label="报名人确认" width="100">
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="{ row }">
          <el-button
            style="margin-left: 10px"
            v-if="row.editStatus"
            type="text"
            @click="saveRow(row)"
            ><i class="el-icon-finished"></i>保存</el-button
          >
          <el-button
            style="margin-left: 10px"
            v-else
            type="text"
            @click="editRow(row)"
            ><i class="el-icon-edit">修改</i></el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="signLogFooter">
      <el-button type="primary" @click="exportExcel" :loading="exportLoading"
        >导出Excel</el-button
      >
    </div>
  </div>
</template>

<script>
import { export_sign_log_list_api, get_sign_log_list_api } from "@/api/signLog";
import dateformat from "dateformat";
import axios from "../../axios/index";

export default {
  data() {
    return {
      jobID: "",
      tableData: [],
      exportLoading: false,
      editForm: {
        inDate: "",
        outDate: "",
        settleHours: "",
      },
    };
  },
  methods: {
    editRow(row) {
      this.$set(row, "editStatus", true);
    },
    saveRow(row) {
      let postData = JSON.parse(JSON.stringify(this.editForm));
      for (let key in postData) {
        if (!postData[key]) {
          delete postData[key];
        }
      }
      if(postData.settleHours){
        postData.settleHours = Number(postData.settleHours)
      }
      postData.peId = row.peId;
      axios
        .post("/back/positionEnter/sysSettle", {
          ...postData,
        })
        .then((res) => {
          this.$message.success("操作成功");
          this.$set(row, "editStatus", false);
          this.__init(this.row)
        });
    },
    __init(row) {
      this.row = row;
      get_sign_log_list_api({
        pid: row.pId,
        // pid: "49cd20c5fa184fe89684ee5d3ac08851",
      }).then((res) => {
        this.tableData = res.data.records;
      });
    },
    exportExcel() {
      this.exportLoading = true;
      export_sign_log_list_api({
        pid: this.row.pId,
      }).then((res) => {
        setTimeout(() => {
          this.exportLoading = false;
        }, 5000);
        let url = window.URL.createObjectURL(res); // 将二进制文件转化为可访问的url
        let a = document.createElement("a");
        document.body.appendChild(a);
        a.href = url;
        a.download = `${this.row.pTitle}-${dateformat(
          this.row.pDate,
          "yyyy-MM-dd"
        )}-打卡记录.xlsx`;
        a.click(); // 模拟点击下载
        window.URL.revokeObjectURL(url);
      });
    },
  },
};
</script>

<style>
.signLogFooter {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 30px;
}

</style>
